<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>联系人纪念日</title>
		<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<style scoped>
			/* 在此定义当前页面css */
			@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
		</style>
		
		<style type="text/css">
			.input-with-select .el-input-group__prepend {
				background-color: #fff;
			}
			.el-cascader{
				width:250px;
			}
			.el-button{
				font-size: 15px;
				float: right;
			}
			.dialog-footer .el-col{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div style="margin-top: 15px;">
					<div class="block">
						<template>
						<el-select v-model="value7" placeholder="试试搜索：全部数据" @change="getValue">
						    <el-option-group v-for="group in options3" :key="group.label" :label="group.label">
						      <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						    </el-option-group>
						  </el-select>
						</template>
						<el-input placeholder="请输入内容" style="width:50%" v-model="input5" class="input-with-select">
							<el-button slot="append" icon="el-icon-search" @click="inputConname">联系人</el-button>
						</el-input>
				</div>
			</div>
				<br />
				<div>
					<span>联系人纪念日</span>
				</div>
				<br />
							
				<template>
					<el-table border :data="tableData3" tooltip-effect="dark" style="width: 100%">
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column label="ID" prop="ID" width="80"></el-table-column>
					<el-table-column prop="mtype" label="纪念日类型" width="140"></el-table-column>
					<el-table-column prop="custname" label="上级联系人" width="150"></el-table-column>
					<el-table-column prop="name" label="联系人"></el-table-column>
					<el-table-column prop="counterpart" label="所有者"></el-table-column>
					<el-table-column prop="phone" label="联系电话"></el-table-column>
					<el-table-column prop="merDay" label="纪念日"></el-table-column>
					<el-table-column fixed="right" label="操作" width="100">
						<template slot-scope="scope">
				  				<el-tooltip content="Bottom center" placement="bottom">
									<div slot="content">查看</div>								
									<i class="el-icon-document" @click="handleClick(scope.row.ID)" style="font-size: 17px;"></i>
								</el-tooltip>
								<el-tooltip content="Bottom center" placement="bottom">
									<div slot="content">编辑</div>								
									<i class="el-icon-edit" @click="updateClick(scope.row.ID)" style="font-size: 17px;"></i>
								</el-tooltip>
				  </template>
					</el-table-column>
					</el-table>
					
					<!-- 编辑弹窗 -->
					<el-dialog title="编辑客户" :visible.sync="dialogFormVisible2">
						<el-form :model="ruleForm2" :rules="rules" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
				<el-row>
				<el-col :span="12">
					<el-form-item label="客户:" required prop="customer">
					<el-autocomplete v-model.trim="ruleForm2.customer" placeholder="请输入内容" :fetch-suggestions="querySearchAsync" @select="handleSelect" v-on:change="loadAll()" v-on:click="loadAll">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-autocomplete>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系人:" prop="contact">
					<el-autocomplete v-model.trim="ruleForm2.contact" placeholder="请输入内容">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-autocomplete>
					</el-form-item>
				</el-col>
				</el-row>
				
				<el-row>
				<el-col :span="12">
					<el-form-item label="纪念日类型:" prop="mtype">
					<el-select v-model="ruleForm2.mtype" placeholder="请选择纪念日类型">
						<el-option label="生日" value="生日"></el-option>
					</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<div class="block">
					<el-form-item label="纪念日:" prop="merday">
					<el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm2.merday" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1"></el-date-picker>
				  </div>
				</el-col>
				</el-row>
					<el-form-item label="备注:" prop="remarks">
					<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="ruleForm2.remarks"></el-input>
					</el-form-item>
			</el-form>
					<div slot="footer" class="dialog-footer">
				<el-row>
				<el-col :span="12">
					<el-button type="primary"  @click="onSubmitupdate()">保存</el-button>
				</el-col>
				<el-col :span="4">
					<el-button @click="dialogFormVisible2 = false">取 消</el-button>
				</el-col>
				</el-row>
				</div>
				</el-dialog>
				
				<!-- 查看弹窗 -->
			<el-dialog title="联系人纪念日" :visible.sync="dialogFormVisible3">
			<hr/>
			<el-form :model="ruleForm" :rules="rules2" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-row>
				<el-col :span="12">
					<el-form-item label="客户:" required prop="customer">
					<span>{{cust}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系人:" prop="contact">
					<span>{{conname}}</span>
					</el-form-item>
				</el-col>
				</el-row>
				
				<el-row>
				<el-col :span="12">
					<el-form-item label="纪念日类型:" prop="mtype">
					<span>{{mty}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<div class="block">
					<el-form-item label="纪念日:" prop="merday">
					<span>{{mda}}</span>
				  </div>
				</el-col>
				</el-row>
					<el-form-item label="备注:" prop="remarks">
					<span>{{rema}}</span>
					</el-form-item>
			</el-form>
				<div slot="footer" class="dialog-footer">
				<el-row>
				<el-col :span="12">
					<el-button @click="dialogFormVisible3 = false">确定</el-button>
				</el-col>
				</el-row>
				</div>
			</el-dialog>
				
				<div style="margin-top:20px">
				<el-button @click="toggleSelection()">取消选择</el-button>
				</div>
					
				</template>
				
			<!-- 分页 -->
			<div class="block" style="display: block; float: left; margin-left: 400px;">
              <el-pagination @current-change="handleCurrentChange" :page-size="pagedata.pageSize" background layout="total,prev, pager, next, jumper" :total="pagedata.total">
              </el-pagination>
            </div>
						
		</div>
			<script type="text/javascript">
				var Main = {
					data() {
						 //检查输入的客户数据是否存在,是否为空  
						 var checkCustomer = (rule, value, callback) => {
							   if(value==null||value==''){
								   callback(new Error('对应客户为必填项'));  
							   }
						          setTimeout(() => {
						            if (this.restaurants==null||this.restaurants=='') {
						              callback(new Error('您输入的客户名称不存在，请确认后再输入'));
						            } else {
						                callback();
						            }
						          }, 1000);
						   };
						return {
							//弹窗
							restaurants: [],
						pickerOptions1: {
					  disabledDate(time) {
						return time.getTime() > Date.now();
					  },
					  shortcuts: [{
						text: '今天',
						onClick(picker) {
						  picker.$emit('pick', new Date());
						}
					  }, {
						text: '昨天',
						onClick(picker) {
						  const date = new Date();
						  date.setTime(date.getTime() - 3600 * 1000 * 24);
						  picker.$emit('pick', date);
						}
					  }, {
						text: '一周前',
						onClick(picker) {
						  const date = new Date();
						  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
						  picker.$emit('pick', date);
						}
					  }]
					},
					value1: '',
					value2: '',
					ruleForm2: {
						input21:'',
						customer:'',
						contact: '',
						mtype: '',
						merday: new Date(),
						remarks: '',
					},
					ruleForm: {
						input21:'',
						contact: '',
						mtype: '',
						merday: new Date(),
						remarks: '',
						customer:''
					},
					rules2:'',
					rules: {
						customer: [
						{ required: true, message: '请输入客户', trigger: 'blur' },
						{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
						],
						contact: [
						{ required: true, message: '请输入联系人', trigger: 'blur' },
						{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
						],
						mtype: [
						{ required: true, message: '请选择纪念日类型', trigger: 'change' }
						],
					},
							
						dialogFormVisible3:false,
						dialogFormVisible2:false,
						activeIndex: '1',
						activeIndex2: '1',
						customer:'',
						//展示参数
						cust:'',
						conname:'',
						mty:'',
						mda:'',
						rema:'',
						options3: [
							  {
					            label: '全部数据',
					            options: [{
					            	label:'全部数据',
					            	value:'7788'
					            	}]						        		
					        	},{
					          label: '时间分类',
					          options: [
					        	  {
									value: '7789',
									label: '今日纪念日提醒',
									},
									{
									value: '7790',
									label: '本月纪念日提醒',
									},
									{
									value: '7791',
									label: '上月纪念日提醒',
									}
					          ]
					        }],
						value7: '',//搜索下拉框
						input5:'',//输入搜索
						tableData3:[],/*全部客户*/
						pagedata:[],/*分页数据*/
						};
					},
					created:function () {
						var _self = this;
						$.ajax({
			                  type: "post",
			                  url: "/customer/merdayPage",
			                  data: {},
			                  success: function (sdata) {
			                	  console.log("页数打印*****："+sdata);
			                	  _self.tableData3=sdata.list;
			                      _self.pagedata=sdata;
			                  }
			            });
					},
					methods: {
						//模糊查询联系人姓名
						inputConname(input5){
							var _this=this;
							console.log("点击搜索："+_this.input5);
							axios.get('/customer/conLike?input5='+(_this.input5),
									{arrayFormat: 'brackets'}
				           			//ajax请求成功的回调函数
				          			).then(function(response){					          				
				           			console.log("回调成功，获取了服务器端返回的值v");
				           			_this.tableData3=response.data.list;
				           			_this.pagedata=response.data;
				           		_this.restaurants=response.data;
				           	}).catch(function(){
				           		console.log("显示客户初始化数据出错了");
				           	});
						},
						//选中下拉框获取数据
						getValue(){
							var _this=this;
							console.log("搜索数据："+_this.value7);
							axios.get('/customer/merdayBycon?value7='+(_this.value7),
									{arrayFormat: 'brackets'}
				           			//ajax请求成功的回调函数
				          			).then(function(response){					          				
				           			console.log("回调成功，获取了服务器端返回的值v");
				           			_this.tableData3=response.data.list;
				           			_this.pagedata=response.data;
				           		_this.restaurants=response.data;
				           	}).catch(function(){
				           		console.log("显示客户初始化数据出错了");
				           	});	//这个是数据的初始化 
						},
						//模糊查询客户姓名
						inputConname(input5){
							var _this=this;
							console.log("点击搜索："+_this.input5);
							axios.get('/customer/conLike?input5='+(_this.input5),
									{arrayFormat: 'brackets'}
				           			//ajax请求成功的回调函数
				          			).then(function(response){					          				
				           			console.log("回调成功，获取了服务器端返回的值v");
				           			_this.tableData3=response.data.list;
				           			//_this.pagedata=response.data;
				           		_this.restaurants=response.data;
				           	}).catch(function(){
				           		console.log("显示客户初始化数据出错了");
				           	});
						},
						/*纪念日分页*/
						handleCurrentChange(page){
							var _self=this;
							console.log("页数打印："+page);
			                $.ajax({
			                      type: "post",
			                      url: "/customer/merdayPage",
			                      data: {pageNum:page,pageSize:5},
			                      success: function (sdata) {
			                    	  console.log("页数打印*****："+sdata);
			                    	  _self.tableData3=sdata.list;
			                          _self.pagedata=sdata;
			                      }
			                });
						},
						//回显纪念日数据
						updateClick(row){
							var _this=this;
							var updateSource=this;
							this.dialogFormVisible2=true;
							console.log(row);
							_this.id=row;
							axios.post("/customer/selectMerday",
								Qs.stringify( {
							   			'conId':row,
								   },{arrayFormat: 'brackets'}) 
								//ajax请求成功的回调函数
							).then(function(v) {
								console.log("回调成功，获取了服务器端返回的值v");
								console.log(v.data);
								
								//传值
								updateSource.ruleForm2.customer=v.data.custId;
								updateSource.ruleForm2.contact=v.data.name;
								updateSource.ruleForm2.mtype=v.data.mtype;
								updateSource.ruleForm2.merday=v.data.merday;
								updateSource.ruleForm2.remarks=v.data.remarks+'';
								
							})/* .catch(function() {
								alert("出错了");
							} )*/;
						},
						//纪念日信息修改方法
					       onSubmitupdate() {
		      					var _this=this;
		      					console.log('submit!');
					    	    var obj = {}; 
					    	    console.log("联系人id:"+_this.id);
		      					 axios.post('/customer/updateMerday',{
		      						//params:{
		      							conId:this.id,
		      							mtype:this.ruleForm2.mtype,
		      							merDay:this.ruleForm2.merday,
		      							remarks:this.ruleForm2.remarks,
		      						//}
		      						},{
		                              transformRequest:[
		                                      function(data){
		                                          let params = '';
		                                          for(let index in data){
		                                              params +=index+'='+data[index]+'&';
		                                          }
		                                          return params;
		                                      }
		                              ]
		                          }).then(v=>{
		                        	  _this.restaurants=v.data;
	    				           		_this.$notify({
	    				           	          title: '编辑成功',
	    				           	          type: 'success',
	    				           	       	  duration:2000
	    				           	        });
		      								  }).catch(error=>{
		      								  console.log("出错了");
		      								
		      								 });
		      					 _this.dialogFormVisible2=false;
		      					showAtRight('/customer/merDay'); 
		      				},
						//添加纪念日
						addMerday(){
							var _this=this;
							  axios.post("/sales/prosale/addOrderpage",
							  		//参数转换
							  		//ajax请求成功的回调函数
							  		).then(function(v){					          				
							  		console.log("回调成功，获取了服务器端返回的值v");
							  		console.log(v.data.contact);
							  		//将数据装换成界面显示
									_this.uosigns= v.data.contact.map(item => {
								        return { value: item.ID, label: item.name };
								      });
							  		
									_this.uosigns1= v.data.contact.map(item => {
								        return { value: item.ID, label: item.name };
								      });
									_this.contactes=v.data.contact;
									_this.uitemvs= v.data.userAll.map(item => {
								        return { value: item.ID, label: item.name };
								      });
									console.log(_this.uitemvs);
									_this.optionspay=v.data.opay;
									_this.options=v.data.otype;
									_this.dialogFormVisible = true;
							  }).catch(function(){
								  console.log("信息出错了");
							  });							 
						   },
						 //加载界面所有者
						      uidremoteMethod(query) {
							        if (query !== '') {
							          this.uidloading = true;
							          setTimeout(() => {
							            this.uidloading = false;
							            this.uitemv = _this.uitemvs.filter(item => {
							              return item.label.toLowerCase()
							                .indexOf(query.toLowerCase()) > -1;
							            });
							          }, 200);
							        } else {
							          this.uosign = [];
							        }
							      },
							      handleChange(value) {
								        console.log(value);
								      },
						//弹窗
						//这个是列表的选择事件
						  handleSelect(item) {
						  		var contacts=[{con:item.label2,conlabel:item.conName}];
						        console.log("item:"+item.conName);
						        this.contacts=contacts;	
						        this.gdID=item.label1;
						      },
						loadAll(){
							//alert(this.customer);
							var _this=this;
							axios.get("/sales/abroadsaleCustName",
						    {
						       	params: {
								custName:this.customer
						      }
						       	}
						//ajax请求成功的回调函数
						).then(function(response){					          				
					       	console.log("回调成功，获取了服务器端返回的值v");
					       	console.log(response.data);					           		
					       	_this.restaurants=response.data;
					       	}).catch(function(){
					       		console.log("显示客户初始化数据出错了");
					       	});	//这个是数据的初始化
					      },
					    //这个是显示查询的数据
						  querySearchAsync(queryString, cb) {
					    	  var restaurants = this.restaurants;				       
						         var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;	
						       	 //alert( cb);
						         clearTimeout(this.timeout);
						         this.timeout = setTimeout(() => { 
							        	cb(this.restaurants);
							        }, 3000 * Math.random());							       
							         if(queryString==''){					       
							         	this.customer=null;
							         	this.loadAll();
							  			var restaurants = this.restaurants;				       
							  			var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;	
							  			// alert( cb);
							  			clearTimeout(this.timeout);
							  			this.timeout = setTimeout(() => {
							  			cb(this.restaurants);
							  			}, 3000* Math.random());	
							         }
							       },
							     //这个是根据输入的内容筛选数据
								    createStateFilter(queryString) {
								     	  console.log("queryString2:"+queryString);
								     	  if(queryString!=null&&queryString!=" "){
								     		  this.customer=queryString;				    		  
								     	  }else{
								     		  this.customer=null; 
								     	  }					    	 
								     	  console.log("customer:"+this.customer);
								     	this.loadAll();
								         return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};
								       },
						//新建纪念日
						/* submitForm(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								console.log('submit!');
							//post提交数据
							axios.post('/customer/newMerday',
									//参数转换
									Qs.stringify(this.ruleForm,{arrayFormat:'brackets'})
									//params:
										//ajax请求成功的回调函数
							).then(function(v){
								console.log("回调成功，获取了服务器端返回的值v");
								console.log(v);
								_this.dialogFormVisible=false;
								window.location.href = '/customer/merDay';
							}).catch(function(){
								alert("出错了！");
							});
							window.location.reload(); //强制刷新 
							} else {
							console.log('error submit!!');
							return false;
							}
						});
						}, */
						resetForm(formName) {
						this.$refs[formName].resetFields();
						},
						
						handleClick(row) {
							var _this=this;
							console.log(row);
							//alert(row);
							this.dialogFormVisible3=true;
							_this.id=row;
							axios.post("/customer/selectMerday",
									Qs.stringify( {
								   			'conId':row,
									   },{arrayFormat: 'brackets'}) 
									//ajax请求成功的回调函数
								).then(function(v) {
									console.log("回调成功，获取了服务器端返回的值v");
									console.log(v.data);
									
									//传值
									_this.cust=v.data.custId;
									_this.conname=v.data.name;
									_this.mty=v.data.mtype;
									_this.mda=v.data.merday;
									_this.rema=v.data.remarks; 
									
								})/* .catch(function() {
									alert("出错了");
								} )*/;
							},
						handleSelect(key, keyPath) {
						console.log(key, keyPath);
						if (key == 1) {

						}
						},
						
						toggleSelection(rows) {
						if (rows) {
							rows.forEach(row => {
							this.$refs.multipleTable.toggleRowSelection(row);
							});
						} else {
							this.$refs.multipleTable.clearSelection();
						}
						},
						
					},
					mounted() {
						this.loadAll();
					}
					}
			var Ctor = Vue.extend(Main);
			new Ctor().$mount('#app');
			</script>
	</body>
</html>
